<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>web5zuoye会转动的风车</title>
	<style>
		div#l{
			width: 100px;
			height: 100px;
			/* border: 1px solid red; */
			position: absolute;
			top: 40px;
			left: 40px;
			font-size: 40px;
			animation: show 1.5s linear infinite;
		}
		div#r{
			width: 100px;
			height: 100px;
			/* border: 1px solid red; */
			position: absolute;
			top: 40px;
			left: 460px;
			font-size: 40px;
			animation: showw 1.5s linear infinite;
		}
		div#a{
			width: 400px;
			height: 400px;
			/* border: 1px solid red; */
			position: absolute;
			top: 10px;
			left: 100px;
			float: left;
			/* transition: all 5s ease-out; */
			animation: dfc 4s infinite;
		}
		div.a1{
			width: 100px;
			height: 200px;
			background: green;
			border-radius: 0 100px 100px 0;
			position: relative;
			left: 200px;
		}
		div.a2{
			width: 200px;
			height: 100px;
			background: red;
			border-radius: 0 0 100px 100px;
			position: relative;
			left: 200px;
		}
		div.a3{
			width: 100px;
			height: 200px;
			background: yellow;
			border-radius: 100px 0 0 100px;
			position: relative;
			left: 100px;
			bottom: 100px
		}
		div.a4{
			width: 200px;
			height: 100px;
			background: blue;
			border-radius: 100px 100px 0 0;
			position: relative;
			bottom: 400px;
		}
		div.a5{
			width: 20px;
			height: 20px;
			background: pink;
			border-radius: 20px 20px 20px 20px;
			position: relative;
			z-index: 2;
			bottom: 410px;
			left: 190px;
		}
		/* div#a:hover{
			transform: rotate(350deg);
		} */
		@keyframes show{
			from{opacity: 1;}
			to{opacity: 0;}
		}
		@keyframes showw{
			from{opacity: 0;}
			to{opacity: 1;}
		}
		 @keyframes  dfc{ 
			0%{ 
				transform:rotate(0deg);
				
			}
			
			25%{ 
				
				transform:rotate( 90deg);
				
			}
			 50%{ 
				transform:rotate(180deg);
			}
			
			75%{ 
				transform:rotate(270deg);
				
			} 
			100%{ 
				transform:rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div id="l">嘎吱<br/>&nbsp&nbsp&nbsp&nbsp\</div>
	<div id="a">
		<div class="a1"></div>
		<div class="a2"></div>
		<div class="a3"></div>
		<div class="a4"></div>
		<div class="a5"></div>
	</div>
	<div id="r">嘎吱<br/>&nbsp&nbsp/</div>
	<div style="height:0px; width:0px; border:0px solid blck;">
		<script src="/js/index.js">
		</script>
	</div>
</body>
</html>
